<template>
  <div class="home-container">
    <div :show='true'>
      <text>111</text>
    </div>
    <wxc-tab-bar :tab-titles="tabTitles"
                 :tab-styles="tabStyles"
                 title-type="icon"
                 @wxcTabBarCurrentTabSelected="wxcTabBarCurrentTabSelected" v-if(0)>
      <!-- 第一个页面内容-->
      <div class="item-container" :style="contentStyle">
        <Home></Home>
      </div>

      <!-- 第二个页面内容-->
      <div class="item-container" :style="contentStyle">
        <Visit></Visit>
      </div>

      <!-- 第三个页面内容-->
      <div class="item-container" :style="contentStyle">
        <Office></Office>
      </div>

      <!-- 第四个页面内容-->
      <div class="item-container" :style="contentStyle">
        <Report></Report>
      </div>

      <!--第五个页面的内容-->
      <div class="item-container" :style="contentStyle">
        <My></My>
      </div>

    </wxc-tab-bar>
  </div>
</template>

<style scoped>
  .item-container {
    width: 750px;
    background-color: #f2f3f4;
    align-items: center;
    justify-content: center;
  }
</style>
<script>
  import { WxcTabBar, Utils } from 'weex-ui'
  import Config from './config'
  // import {Visit,Office,Report,My} from './rootView.js'
  import Home from './components/home.vue'
  import Visit from './components/visit.vue'
  import Office from './components/office.vue'
  import Report from './components/report.vue'
  import My from './components/my.vue'
  import Load from './load.vue'

  export default {
    components: { WxcTabBar,Home,Visit,Office,Report,My,Load},
    data: () => ({
      isLoad:false,
      tabTitles: Config.tabTitles,
      tabStyles: Config.tabStyles
    }),
    created () {
      const tabPageHeight = Utils.env.getPageHeight();
      // 如果页面没有导航栏，可以用下面这个计算高度的方法
      // const tabPageHeight = Utils.env.deviceHeight / Utils.env.deviceWidth * 750;
      const { tabStyles } = this;
      this.contentStyle = {
         height: (tabPageHeight - tabStyles.height) + 'px'
        }
    },
    methods: {
      wxcTabBarCurrentTabSelected (e) {
        const index = e.page;
        // console.log(index);
      }
    }
  };
</script>
